<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Edit Name</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../lib/mui/mui.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			body {
				background: white;
			}
			.app-primary {
				background-color: rgba(24,103,194,0.81);
				color: white;
			}
			.app-form {
				padding: 40px 32px 0px 32px;
				background: white;
			}
			.app-form input {
				display: block;
				width: 100%;
				margin: 0 auto;
				outline: none;
				padding-top: 26px;
				padding-bottom: 26px;
				border: none;
				border-bottom: 1px solid #eee;
				border-radius: 0px;
				background: none;
			}
		</style>
	</head>

	<body>
		<header class="app-bar mui-bar mui-bar-nav app-no-shadow">
			<button id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left app-bar-btn"></button>
			<h1 class="mui-title">Edit Name</h1>
			<button app-event="reset" class="mui-icon mui-icon-refreshempty mui-pull-right app-bar-btn"></button>
		</header>
		<div class="mui-content">
			<form class="app-form" onsubmit="return false;">
				<div class="app-input-row">
					<label></label>
					<input id='oldname' type="text" disabled='disabled' class="mui-input-clear">
				</div>
				<div class="app-input-row">
					<label></label>
					<input id="newname" type="text" class="mui-input-clear" placeholder="new name">
				</div>
				<br />
				<br />
				<div class="app-input-row">
					<button app-event="save" class="mui-btn app-primary mui-btn-block app-no-border ">Save</button>
				</div>
			</form>
		</div>
	</body>
	<script src="../../lib/mui/mui.js"></script>
	<script src="../../lib/framework/z-app.js"></script>
	<script>
		App.go({
			events : {
				keys : {
					back : function(e) {
						mui.back();
					}
				},
				gesture : {
					swiperight : function(e) {
						mui.back();
					}
				},
				custom : {
					reset : function(e) {
						document.getElementsByClassName('app-form')[0].reset();
					},
					save : function(e) {
						// 检查输入合法性
						var nn = document.getElementById('newname');
						if (nn.value == '') {
							mui.alert('name required');
							nn.focus();
							return false;
						}
						
						var data = { name : nn.value };
						App.httpClient().ajax('POST', "/api/user/update-name", data, function(resp){
							mui.alert('success, your new name is:'+nn.value);
							App.notifyOpener(resp);
							// 关闭当前页面
							mui.back();
						}, function(xhr, type, statusText){
							mui.toast("failed!"+statusText);
						});
					},
				}
			},
			appReady : function() {
				var data = plus.webview.currentWebview().getStyle().data;
				document.getElementById('oldname').setAttribute('placeholder', data);
			},
		});
	</script>
</html>